<template>
	<view class="fu-p-y-30">
		<demo-desc margin="0 15px">
			此组件是一个tabs标签组件，在标签多的时候，可以配置为左右滑动，标签少的时候，可以禁止滑动且自动居中。
		</demo-desc>
		
		<fu-section title="基础演示" customClass="fu-m-t-20 fu-m-x-30" type="line"></fu-section>
		<fu-tabs :list="tabsMenu"></fu-tabs>
		
		<fu-section title="粘性布局" customClass="fu-m-t-20 fu-m-x-30" type="line"></fu-section>
		<fu-sticky bgColor="#FFFFFF">
			<fu-tabs :list="tabsMenu"></fu-tabs>
		</fu-sticky>
		
		<fu-section title="显示徽标" customClass="fu-m-t-20 fu-m-x-30" type="line"></fu-section>
		<fu-sticky bgColor="#FFFFFF">
			<fu-tabs :list="tabsMenuBadge"></fu-tabs>
		</fu-sticky>
		
		<fu-section title="禁止滚动" customClass="fu-m-t-20 fu-m-x-30" type="line"></fu-section>
		<fu-tabs :list="tabsMenuRoll" :scrollable="false"></fu-tabs>
		
		<fu-section title="禁用菜单" customClass="fu-m-t-20 fu-m-x-30" type="line"></fu-section>
		<fu-tabs :list="tabsMenuDisabled"></fu-tabs>
		
		<fu-section title="自定义样式" customClass="fu-m-t-20 fu-m-x-30" type="line"></fu-section>
		<fu-tabs :list="tabsMenu" activeColor="#FF770F" lineColor="#FF770F"></fu-tabs>
		
		<fu-section title="滑块设置背景图" customClass="fu-m-t-20 fu-m-x-30" type="line"></fu-section>
		<fu-tabs :list="tabsMenu" lineWidth="20" lineHeight="6" :lineColor="`url(${lineBg}) 100% 100%`"></fu-tabs>
		
		<fu-section title="右侧自定义插槽" customClass="fu-m-t-20 fu-m-x-30" type="line"></fu-section>
		<fu-tabs :list="tabsMenu">
			<template v-slot:right>
				<view class="fu-p-x-30 fu-flex">
					<fu-icons name="dashboard-fill" size="20"></fu-icons>
				</view>
			</template>
		</fu-tabs>
			
		<fu-section title="左侧自定义插槽" customClass="fu-m-t-20 fu-m-x-30" type="line"></fu-section>
		<fu-tabs :list="tabsMenu">
			<template v-slot:left>
				<view class="fu-p-x-30 fu-flex">
					<fu-icons name="dashboard-fill" size="20"></fu-icons>
				</view>
			</template>
		</fu-tabs>
		
		<view class="fu-h-700"></view>
	</view>
</template>

<script setup>
	import { reactive } from 'vue';
	
	// data数据
	const lineBg = "";
	const tabsMenu = reactive([
		{name: '推荐'},
		{name: '电影'},
		{name: '科技'},
		{name: '动漫'},
		{name: '电视'},
		{name: '音乐'},
		{name: '美食'},
		{name: '综艺'},
		{name: '文化'},
		{name: '财经'}
	])
	const tabsMenuBadge = reactive([
		{name: '推荐'},
		{name: '电影'},
		{name: '科技', badge: {isDot: true}},
		{name: '动漫'},
		{name: '电视'},
		{name: '音乐', badge: {value: 5}},
		{name: '美食'},
		{name: '综艺'},
		{name: '文化'},
		{name: '财经'}
	])
	const tabsMenuDisabled = reactive([
		{name: '推荐'},
		{name: '电影'},
		{name: '科技'},
		{name: '动漫', disabled: true},
		{name: '电视'},
		{name: '音乐'},
		{name: '美食'},
		{name: '综艺'},
		{name: '文化'},
		{name: '财经'}
	])
	const tabsMenuRoll = reactive([
		{name: '推荐'},
		{name: '电影'},
		{name: '科技'},
		{name: '动漫'},
	])
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}
</style>